<template>
    <div class="custom-view" v-if="currentView">
        <div class="custom-view-mobile" v-if="type=='mobile' && !showComponent">
            <div class="custom-view-mobile-head">
                {{i18n('form.customPage','自定义页面') }}
            </div>
            <component v-bind:is="currentView" ref="component" ></component>
        </div>
        <!-- pc-->
        <div v-else>
            <component v-bind:is="currentView" ref="component" ></component>
        </div>
    </div>
</template>

<script>
import FormCustomPublic from "../FormCustomPublic";
import BusEvent from "../BusEvent";
import CustomPageColumnApi from "@/common/api/portal/customPageColumn.js";
import { Util } from '@lowcode/jpaas-base-lib';
import {PublicFunction} from "@lowcode/jpaas-share-component";
import shareFunction from "@/views/modules/form/FormCustomView/components/ColumnView/js/shareFunction.js"
/**
 * 自定义页面(自定义栏目)
 */
import {ShareFormBoListPreview} from '@lowcode/jpaas-share-component';
export default {
    name: "CustomColumnView",
    inject:['appId'],
    mixins:[FormCustomPublic,BusEvent],
    props:["config",'type',"showComponent"],
    data() {
        return {
            currentView: "",
            defScript: "export default {\n" +
                "    props: {\n" +
                "    },\n" +
                "   //数据定义\n" +
                "    data(){\n" +
                "        return {\n" +
                "        }\n" +
                "    },\n" +
                "    //初始化时加载\n" +
                "    created(){\n" +
                "    },\n" +
                "    //页面自定义函数\n" +
                "    methods:{\n" +
                "    },\n" +
                "    //页面自定义观察函数\n" +
                "    watch:{}\n" +
                "}",
            customPage:"",
            localType:"",
        }
    },
    created() {
        this.localType=this.type || "pc";
        if(this.config && this.config.alias){
            this.initColumn();
        }
    },
    methods: {
        handPublicReceive (args) {
            //增加调用自定义方法.
            let method = args.method;
            let component = this.$refs["component"];
            if(method){
                let data = args.data;
                let func = component[method];
                if (!func) {
                    console.warn("请在当前组件中配置方法:" + method);
                    return;
                }
                if (data) {
                    func(data);
                } else {
                    func();
                }
                return;
            }
            else{
                //处理外部传的参数
                if (component["handCustomParams"]) {
                    component["handCustomParams"](args);
                }
            }
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },
        initColumn() {
            let self_=this;
            CustomPageColumnApi.getByAlias(this.config.alias,this.appId).then(res =>{
                if(!res || res.length==0){
                    return;
                }
                self_.customPage=res[0];
                //加载js
                let jsScript = "";
                let script_ = "";
                if (self_.customPage.javascript) {
                    jsScript = self_.customPage.javascript;
                } else {
                    //设置默认js
                    jsScript = self_.defScript;
                }
                jsScript=Util.replaceDefault(jsScript);
                let func=new Function("return " + jsScript);
                script_ = func();
                let template=self_.localType=='pc'?self_.customPage.template:self_.customPage.mobileTemplate;
                let key="custom-page-view" + self_.customPage.alias;
                window.app.component(key, {
                    template: template,
                    //导入扩展的JS
                    components:{ShareFormBoListPreview},
                    mixins:[PublicFunction,shareFunction,FormCustomPublic],
                    ...script_
                });
                self_.currentView =key;
                self_.loadStyle(self_.customPage.cssStyle);
            });
        },
        //加载css
        loadStyle(cssStyle) {
            let _cssStyle = "<style scoped>" + cssStyle + "</style>"
            let style = "";
            let styleMath = _cssStyle.match(/<style scoped>([\s\S]*)<\/style>/) || _cssStyle.match(/<style>([\s\S]*)<\/style>/);
            if (styleMath != null) {
                style = styleMath[1];
            }
            let newStyle = document.getElementById("customStyle" + this.customPage.alias || "");
            if (!newStyle) {
                newStyle = document.createElement('style');
                document.getElementsByTagName('head')[0].appendChild(newStyle)
            }
            newStyle.id = "customStyle" + this.customPage.alias || "";
            newStyle.innerHTML = style;
        },
    },
    watch:{
    }
}
</script>

<style scoped>
.custom-view-mobile-head{
    text-align: center;
    line-height: 27px;
    border-bottom: 1px solid #dadde0;
    margin-bottom: 10px;
    color: #303030;
}
.custom-view-mobile{
    width: 380px;
    height: 700px;
    margin: auto;
    margin-top: 16px;
    background-position: center;
    background: url(@public/image/formCustom/mobile.png);
    background-size: 100% 100%;
    overflow: hidden;
    padding: 50px 30px 0px 30px;
}
.custom-view{
    margin: auto;
}
</style>
